<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-card class="card" :bordered="false">
          <a-row class="form-row" :gutter="16">
            <a-col :lg="8">
              <a-form-item label="任务名">
                <a-input
                  placeholder="请输入任务名称"
                  v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item label="任务描述">
                <a-input
                  placeholder="请输入任务描述"
                  v-decorator="['task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item label="执行人">
                <a-select
                  placeholder="请选择执行人"
                  v-decorator="['task.executor',{rules: [{ required: true, message: '请选择执行人'}]}  ]"
                >
                  <a-select-option value="黄丽丽">黄丽丽</a-select-option>
                  <a-select-option value="李大刀">李大刀</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="8">
              <a-form-item label="责任人">
                <a-select
                  placeholder="请选择责任人"
                  v-decorator="['task.manager',  {rules: [{ required: true, message: '请选择责任人'}]} ]"
                >
                  <a-select-option value="王伟">王伟</a-select-option>
                  <a-select-option value="李红军">李红军</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item label="提醒时间">
                <a-time-picker
                  style="width: 100%"
                  v-decorator="['task.time', {rules: [{ required: true, message: '请选择提醒时间'}]} ]"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item label="任务类型">
                <a-select
                  placeholder="请选择任务类型"
                  v-decorator="['task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]"
                >
                  <a-select-option value="定时执行">定时执行</a-select-option>
                  <a-select-option value="周期执行">周期执行</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>

        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="Tab 1" key="1">
            <a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
              <template
                v-for="(col, i) in ['name', 'workId', 'department']"
                :slot="col"
                slot-scope="text, record, index"
              >
                <a-tooltip title="必填项" :defaultVisible="false" overlayStyle="{ color: 'red' }">
                  <a-input
                    :key="col"
                    v-if="record.editable"
                    style="margin: -5px 0"
                    :value="text"
                    :placeholder="columns[i].title"
                    @change="e => handlerRowChange(e.target.value, record.key, col)"
                  />
                  <template v-else>{{ text }}</template>
                </a-tooltip>
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <template v-if="record.editable">
                  <span v-if="record.isNew">
                    <a @click="saveRow(record.key)">添加</a>
                    <a-divider type="vertical" />
                    <a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)">
                      <a>删除</a>
                    </a-popconfirm>
                  </span>
                  <span v-else>
                    <a @click="saveRow(record.key)">保存</a>
                    <a-divider type="vertical" />
                    <a @click="cancelEditRow(record.key)">取消</a>
                  </span>
                </template>
                <span v-else>
                  <a @click="editRow(record.key)">编辑</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="是否要删除此行？" @confirm="removeRow(record.key)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </template>
            </a-table>

            <a-button
              style="width: 100%; margin-top: 16px; margin-bottom: 8px"
              type="dashed"
              icon="plus"
              @click="newRow"
            >新增成员</a-button>
          </a-tab-pane>
          <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
          <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from "@/api/manage";
import pick from "lodash.pick";
//import moment from "moment"

export default {
  name: "JeecgDemoTabsModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      // table
      columns: [
        {
          title: "成员姓名",
          dataIndex: "name",
          key: "name",
          width: "20%",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "工号",
          dataIndex: "workId",
          key: "workId",
          width: "20%",
          scopedSlots: { customRender: "workId" }
        },
        {
          title: "所属部门",
          dataIndex: "department",
          key: "department",
          width: "40%",
          scopedSlots: { customRender: "department" }
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "operation" }
        }
      ],
      data: [
        {
          key: "1",
          name: "小明",
          workId: "001",
          editable: false,
          department: "行政部"
        },
        {
          key: "2",
          name: "李莉",
          workId: "002",
          editable: false,
          department: "IT部"
        },
        {
          key: "3",
          name: "王小帅",
          workId: "003",
          editable: false,
          department: "财务部"
        }
      ],

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/test/jeecgDemo/add",
        edit: "/test/jeecgDemo/edit"
      }
    };
  },
  created() {},
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, "name", "keyWord", "sex", "age", "email", "content")
        );
        //时间格式化
        this.form.setFieldsValue({
          punchTime: this.model.punchTime
            ? moment(this.model.punchTime, "YYYY-MM-DD HH:mm:ss")
            : null
        });
        this.form.setFieldsValue({
          birthday: this.model.birthday ? moment(this.model.birthday) : null
        });
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
          } else {
            httpurl += this.url.edit;
            method = "put";
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.punchTime = formData.punchTime
            ? formData.punchTime.format("YYYY-MM-DD HH:mm:ss")
            : null;
          formData.birthday = formData.birthday
            ? formData.birthday.format()
            : null;

          console.log(formData);
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    newRow() {
      // 通过时间戳生成 UUID
      let uuid = Math.round(new Date().getTime()).toString();
      console.log("uuid: " + uuid);
      this.data.push({
        key: uuid,
        name: "",
        workId: "",
        department: "",
        editable: true,
        isNew: true
      });
    },
    removeRow(key) {
      const newData = this.data.filter(item => item.key !== key);
      this.data = newData;
    },
    saveRow(key) {
      let target = this.data.filter(item => item.key === key)[0];
      target.editable = false;
      target.isNew = false;
    },
    handlerRowChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    editRow(key) {
      let target = this.data.filter(item => item.key === key)[0];
      target.editable = !target.editable;
    },
    cancelEditRow(key) {
      let target = this.data.filter(item => item.key === key)[0];
      target.editable = false;
    }
  }
};
</script>

<style scoped>
.ant-modal-body {
  padding: 8px !important;
}
</style>